<template>
  <div class="sider-top" :class="{'menuHide': props.menuMedia}">
    <div class="logo">
      <img src="/public/img/denglu.png" alt="">
    </div>
    <div>
     <keep-alive>
      <div
        v-for="item in menuItems"
        :key="item.index"
        :class="{
          'sider-body': currentIndex === item.index,
          'sider-body-nabu': currentIndex !== item.index,
        }"
        @click="clickmenuItem(item.index, item.url)"
      >
        <!-- <div>{{ item.icon }}</div> -->
        <!-- 使用动态组件渲染图标 -->
        <img
       
          class="imgslist"
          :src="currentIndex === item.index ? item.icon : item.imgs"
          alt=""
        />
        <!-- <component :is="item.icon" :size="22" /> -->
        <div class="daohang">{{ item.text }}</div>
      </div>
    </keep-alive>
    </div>

    <!-- 导航拦 -->
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  menuMedia: {
    type: Boolean,
    default: false,
  },
});

console.log(props.menuMedia)
import { ref, reactive, onMounted, watch,defineEmits } from "vue";
import { useRouter,useRoute  } from "vue-router";
import { customSetItem } from "../utils/LocalStorageService";
// import shouye1 from '@/assets/img/shouye2.png';
// import ce1 from '@/assets/img/ce-1.png';
// import zhen1 from '@/assets/img/zhen1.png';
// import xue1 from '@/assets/img/xue1.png';
// import lian1 from '@/assets/img/lian1.png';
// import kao1 from '@/assets/img/kao1.png';
// import pei1 from '@/assets/img/pei1.png';
const route = useRoute(); // 获取当前路由信息
const classtop = ref(false);
const router = useRouter();
// 存储当前被点击项的索引
const currentIndex = ref<number | null>(null);
const menuItems = [
   { index: 1, text: "首页", icon: "/img/shouye1.png", imgs: "/img/shouye2.png", url: "/home" },
  { index: 2, text: "AI精准测", icon: "/img/ce-1.png", imgs: "/img/ce-2.png", url: "/Measure" },
  { index: 3, text: "AI精准评", icon: "/img/zhen1.png", imgs: "/img/zhen2.png", url: "/Diagnosis" },
  { index: 4, text: "AI精准学", icon: "/img/xue1.png ", imgs: "/img/xue2.png", url: "/Study" },
  { index: 5, text: "AI精准练", icon: "/img/lian1.png", imgs: "/img/lian2.png", url: "/Practise" },
];
// 监听 localStorage 的变化

// 监听路由变化
watch(route, () => {
  const targetItem = menuItems.find(item => item.url === route.path);
  if (targetItem) {
    currentIndex.value = targetItem.index;
    localStorage.setItem("index", String(targetItem.index));
    customSetItem("index", String(targetItem.index));
  }
}, { deep: true });
// 在组件卸载时移除 storage 事件监听器
// watch(() => null, () => {
//   window.removeEventListener('storage', checkLocalStorageChange);
// }, { immediate: true, deep: true });
onMounted(() => {

// 根据当前路由高亮对应的菜单项
const targetItem = menuItems.find(item => item.url === route.path);
  if (targetItem) {
    currentIndex.value = targetItem.index;
  }

});
const logoUrl = ref();
logoUrl.value = JSON.parse(localStorage.getItem("permission"))?.url;
// <icon-user-group />
// <icon-storage />

const emit = defineEmits(['update:message', 'update:menuMedia'])
// 点击菜单项的处理函数
const clickmenuItem = (index: number, url: any) => {
  localStorage.setItem("index", String(index));
  emit('update:menuMedia',false)
  customSetItem("index", String(index));
  currentIndex.value = index;

  router.push(url);
};
</script>
<style lang="less" scoped>
.logo {
  width: 3.5vw; 
  // height: 100px;
  margin: 20px auto 0;
  background-color: #fff !important;
  img{
    width: 100%;
    height: 100%;
    // background-color: #fff;  
  }
  // width: 23px;
}
.sider-top {
  // width: 100%;
  // width: /;
  overflow: hidden;
  // background-color: #d8b1b1;
  color: #03305c;
}
.sider-body {
  margin: 24px auto 0;
  padding: 10px 0;
  width: 3.5vw;
  // height: 5vh;
  font-size:1vw;
  font-weight: 700;
  background: #0075ff;
  
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -2px 4px rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.sider-body-nabu {
  margin: 24px auto 0;
  padding: 8px 0;
  width: 3.5vw;
  height: 100%;
  // height: 3rem;
  font-size:1vw;
  background: #F8FBFF;
  border-radius: 12px;
  text-align: center;
  color: #03305c;
  cursor: pointer;
  // color: #fff;
}
// .daohang{
//   font-size: 1vw;
// }
.imgslist{
  width: 1.5vw;
}
</style>
